<template>
	<view class="tabbar">
		<view
			class="tabbar-item"
			v-for="(item, index) in list"
			:key="'tabbar' + item.index"
			@click="changeTab(item.index)"
		>
			<image
				class="img"
				:src="item.selectedIconPath"
				v-if="current == item.index"
			></image>
			<image class="img" :src="item.iconPath" v-else></image>
			<view class="text active" v-if="current == item.index">{{
				item.text
			}}</view>
			<view class="text" v-else>{{ item.text }}</view>
		</view>
	</view>
</template>

<script setup>
	import { onReady } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { useUsercodeStore } from '@/store/usercode.js'

	const userCodeStore = useUsercodeStore()

	const props = defineProps({
		current: Number,
	})
	const list = ref([])
	function changeTab(e) {
		if (userCodeStore.usercode.mobile == '18254076917' && e != 0) {
			--e
		}
		// console.log(e);
		// console.log(list.value[e]);
		uni.switchTab({
			url: '/' + list.value[e].pagePath,
			success: function (e) {
				let currentPage = getCurrentPages().pop()
				if (currentPage == undefined || currentPage == null) return
				currentPage.onReady()
			},
		})
	}
	onShow(() => {
		if (userCodeStore.usercode.mobile == '18254076917') {
			list.value = [
				{
					text: '福袋',
					pagePath: 'pages/bag/index',
					iconPath: '../static/bag.png',
					selectedIconPath: '../static/bag-active.png',
					index: 0,
				},
				{
					text: '拆卡',
					pagePath: 'pages/card/index',
					iconPath: '../static/card.png',
					selectedIconPath: '../static/card-active.png',
					index: 1,
				},
				{
					text: '首页',
					pagePath: 'pages/home/index',
					iconPath: '../static/home.png',
					selectedIconPath: '../static/home-active.png',
					index: 2,
				},
				{
					text: '天选',
					pagePath: 'pages/chosen/index',
					iconPath: '../static/chosen.png',
					selectedIconPath: '../static/chosen-active.png',
					index: 3,
				},
				{
					text: '我的',
					pagePath: 'pages/mine/index',
					iconPath: '../static/mine.png',
					selectedIconPath: '../static/mine-active.png',
					index: 4,
				},
			]
		} else {
			list.value = [
				{
					text: '福袋',
					pagePath: 'pages/bag/index',
					iconPath: '../static/bag.png',
					selectedIconPath: '../static/bag-active.png',
					index: 0,
				},
				{
					text: '拆卡',
					pagePath: 'pages/card/index',
					iconPath: '../static/card.png',
					selectedIconPath: '../static/card-active.png',
					index: 1,
				},
				{
					text: '首页',
					pagePath: 'pages/home/index',
					iconPath: '../static/home.png',
					selectedIconPath: '../static/home-active.png',
					index: 2,
				},
				{
					text: '天选',
					pagePath: 'pages/chosen/index',
					iconPath: '../static/chosen.png',
					selectedIconPath: '../static/chosen-active.png',
					index: 3,
				},
				{
					text: '我的',
					pagePath: 'pages/mine/index',
					iconPath: '../static/mine.png',
					selectedIconPath: '../static/mine-active.png',
					index: 4,
				},
			]
		}
	})
</script>

<style lang="scss" scoped>
	.tabbar {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		width: 100%;
		height: 182rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #ffffff;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-shadow: 0rpx -19rpx 54rpx 0rpx rgba(34, 34, 34, 0.05);
		/* padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom); */
	}
	.tabbar-item {
		padding: 0 40rpx;
		text-align: center;
	}
	.img {
		height: 40rpx;
		width: 40rpx;
	}
	.text {
		font-size: 20rpx;
		font-weight: 500;
		color: #7b8499;
	}
	.text.active {
		color: $all-color;
	}
</style>
